<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/home.css">

</head>

<body>
    <header>
        <div class="search-bar">
            <a href="../html/register.html">
                <img src="../images/profilePhoto.jpg" alt="">
            </a>
            <input type="text" placeholder="搜索框" />
        </div>
    </header>

    <div class="header-nav">
        <div>
            <a href="../html/home.html">推荐</a>
        </div>
        <div>
            <a href="#about">热门</a>
        </div>
        <div>
            <a href="#services">追番</a>
        </div>
        <div>
            <a href="#contact">影视</a>
        </div>
    </div>

    <div class="carousel">
        <div class="carousel-images">
            <img src="../images/轮换图1.jpg" alt="Image 1" class="active">
            <img src="../images/轮换图2.jpg" alt="Image 2">
            <img src="../images/轮换图3.jpg" alt="Image 3">
            <img src="../images/轮换图4.jpg" alt="Image 4">
        </div>
        <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
        <button class="next" onclick="changeSlide(1)">&#10095;</button>
    </div>


    <main>
        <div class="video-feed">
            <div class="video-column">
                <div class="video-item">
                    <img src="../images/默杀.jpg" alt="您的图片已丢失！！！">
                    <h2>默杀</h2>
                    <p>该片讲述了在校园霸凌事件横生的女子中学，在女子坠亡事件发生后，校园中的女学生相继失踪，在集体的沉默背后，正酝酿着充满仇恨与杀戮的复仇的故事</p>
                </div>
                <div class="video-item">
                    <img src="../images/因果报应.jpg" alt="您的图片已丢失！！！">
                    <h2>因果报应</h2>
                    <p>该片讲述了当女儿被恶人残忍迫害，真相与正义似乎无处可寻，憨厚老实的底层父亲只能以身设局，用剃须刀杀出一条复仇血路的故事</p>
                </div>
                <div class="video-item">
                    <img src="../images/异形.jpg" alt="您的图片已丢失！！！">
                    <h2>异形</h2>
                    <p>该片时间线设定在1979年第一部《异形》与1986年的续集《异形2》之间，讲述了太空殖民者为逃离外星采矿殖民地的沉闷生活，在冒险探索一座废弃的太空站时，意外遭遇了宇宙中最可怕的生命体——异形。人类再次成为异形生物捕猎的目标的故事
                    </p>
                </div>
                <div class="video-item">
                    <img src="../images/阿诺拉.jpg" alt="您的图片已丢失！！！">
                    <h2>阿诺拉</h2>
                    <p>该影片聚焦于一位布鲁克林的性工作者，在纽约意外遇见商界巨头的儿子后，因一时冲动而步入婚姻殿堂的浪漫情事</p>
                </div>
                <div class="video-item">
                    <img src="../images/猫猫的奇幻漂流.jpg" alt="您的图片已丢失！！！">
                    <h2>猫猫的奇幻漂流</h2>
                    <p>《猫猫的奇幻漂流》是一部动画作品</p>
                </div>
                <!-- <div class="video-item">
                    <img src="../images/titlePhoto.png" alt="您的图片已丢失！！！">
                    <h2>test1</h2>
                    <p>简介</p>
                </div> -->

            </div>
            <div class="video-column">
                <div class="video-item">
                    <img src="../images/某种物质.jpg" alt="您的图片已丢失！！！">
                    <h2>某种物质</h2>
                    <p>该片讲述了一名过气好莱坞明星陷入生涯低谷，惨遭解雇，从不轻易放弃的她选择了一种名为“实体”的革命性医疗服务来重拾自己的故事</p>
                </div>
                <div class="video-item">
                    <img src="../images/大突围.jpg" alt="您的图片已丢失！！！">
                    <h2>大突围</h2>
                    <p>该片讲述1941年11月中国抗日军事政治大学第一分校的师生们，在沂蒙山区生死突围的悲壮故事</p>
                </div>
                <div class="video-item">
                    <img src="../images/走走停停.jpg" alt="您的图片已丢失！！！">
                    <h2>走走停停</h2>
                    <p>该片讲述了在北京待了多年的吴迪，仍然一事无成，心灰意冷的他决定回老家，谁知老家的生活也没有想象中顺利，本以为一切又陷入一潭死水，然而偶遇高中同学冯柳柳后，他的生活发生了意想不到的转变的故事
                    </p>
                </div>
                <div class="video-item">
                    <img src="../images/最后的里程.jpg" alt="您的图片已丢失！！！">
                    <h2>最后的里程</h2>
                    <p>该片讲述了“黑色星期五”前夜，全球最大购物网站之一运送的包裹接连发生爆炸，让整个日本陷入恐慌，物流仓库的新任主管舟渡艾蕾娜和团队经理梨本孔一同应对这场前所未有的危机故事</p>
                </div>
                <div class="video-item">
                    <img src="../images/蜗牛回忆录.jpg" alt="您的图片已丢失！！！">
                    <h2>蜗牛回忆录</h2>
                    <p>《蜗牛回忆录》是亚当·艾略特执导的动画片，于2024年10月17日澳大利亚本土上映</p>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="nav">
            <div class="nav-item">
                <a href="../html/home.html">
                    <img src="../images/首页.jpg" />
                    <p>首页</p>
                </a>
            </div>
            <div class="nav-item">
                <a href="../html/rank.html">
                    <img src="../images/排行榜.jpg" />
                    <p>排行榜</p>
                </a>
            </div>
            <div class="nav-item">
                <a href="../html/forum.html">
                    <img src="../images/动态.jpg" />
                    <p>动态</p>
                </a>
            </div>

            <div class="nav-item">
                <a href="../html/me.html">
                    <img src="../images/我的.jpg" />
                    <p>我的</p>
                </a>
            </div>
        </div>
    </footer>

</body>

<script>
    let currentIndex = 0;
    const images = document.querySelectorAll('.carousel-images img');

    function showSlide(index) {
        // 隐藏所有图像
        images.forEach(img => img.classList.remove('active'));
        // 显示当前图像
        images[index].classList.add('active');
    }

    function changeSlide(step) {
        currentIndex = (currentIndex + step + images.length) % images.length; // 循环切换
        showSlide(currentIndex);
    }

    setInterval(() => {
        changeSlide(1);
    }, 3000); // 每3秒切换一次，调整间隔根据需要
</script>


</html>